<template>
	<view class="content">
		<view class="main">
			<navgiter :navigationMsg="navigationMsg"></navgiter>
			<view class="zy_curd" v-for="(item,index) in data" :key="index">
				<view class="zy_curd_top">
					<view class="zy_curd_topleft">
						<image src="/static/商店.png" class="zy_curd_topleftimg" mode=""></image>
						<p>{{item.sc_name}}</p>
						<image src="/static/前进.png" class="zy_curd_topleftimg" mode=""></image>
					</view>
					<view class="zy_curd_topright">
						<p>{{item.types}}</p>
					</view>
				</view>
				<view class="zy_curd_center">
					<view class="zy_curd_centerleft">
						<image src="/static/主页.png" style="width: 100%;height: 100%;" mode=""></image>
					</view>
					<view class="zy_curd_centerright">
						<p style="font-size: 30rpx;line-height: 50rpx;margin-top: 10rpx;">{{item.title}}</p>
						<p style="color: #B1A8A8;">套餐：{{item.taos}}</p>
						<p style="color: #B1A8A8;">租期：{{item.times}}</p>
						<p style="color: #B1A8A8;">数量：{{item.number}}</p>
					</view>
				</view>
				<view class="zy_curd_centertwo">
					<view class="zy_curd_centertwo_left">
						<p>第{{item.onthtimes}}期（共{{item.onethtime}}期）</p>
						<image src="/static/309下一页、前进、查看更多.png" style="width: 45rpx;height: 45rpx;margin-top: 20rpx;"
							mode=""></image>
					</view>
					<view class="zy_curd_centertwo_right">
						<p>扣款日：{{item.koukuanrs}}</p>
					</view>
				</view>
				<view class="zy_curd_btm">
					<view class="zy_curd_btmleft">
						<p>￥<span>{{item.monys}}</span></p>
					</view>
					<view class="zy_curd_btmright">
						<u-button @click="onxus" text="买断"
							style="width: 150rpx;border-radius: 50rpx;background: black;color: #ffffff;border: none;margin-top: 15rpx;height:70rpx;"></u-button>
						<u-button @click="onmaiduans" text="续租"
							style="width: 150rpx;border-radius: 50rpx;background: #FCD748;color: black;border: none;margin-top: 15rpx;height:70rpx;"></u-button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navgiter from "../../../common/navgats/navgats.vue"
	export default {
		data() {
			return {
				navigationMsg: {
					title: "租用中",
					bgColor: "#ffffff"
				},
				data: [{
						sc_name: "官方严选商城",
						types: "租用中",
						title: "99新 iphone12 A14仿生芯片 超doasnfgoisdgba",
						taos: "521G 原色钛金属色 随租随还",
						times: "2025.03.02-2026.03.20",
						number: 1,
						onthtimes: 11,
						onethtime: 12,
						koukuanrs: "2025-03-25",
						monys: 468.08
					},
					{
						sc_name: "官方严选商城",
						types: "租用中",
						title: "99新 iphone12 A14仿生芯片 超doasnfgoisdgba",
						taos: "521G 原色钛金属色 随租随还",
						times: "2025.03.02-2026.03.20",
						number: 1,
						onthtimes: 11,
						onethtime: 12,
						koukuanrs: "2025-03-25",
						monys: 468.08
					},
					{
						sc_name: "官方严选商城",
						types: "租用中",
						title: "99新 iphone12 A14仿生芯片 超doasnfgoisdgba",
						taos: "521G 原色钛金属色 随租随还",
						times: "2025.03.02-2026.03.20",
						number: 1,
						onthtimes: 11,
						onethtime: 12,
						koukuanrs: "2025-03-25",
						monys: 468.08
					},
					{
						sc_name: "官方严选商城",
						types: "租用中",
						title: "99新 iphone12 A14仿生芯片 超doasnfgoisdgba",
						taos: "521G 原色钛金属色 随租随还",
						times: "2025.03.02-2026.03.20",
						number: 1,
						onthtimes: 11,
						onethtime: 12,
						koukuanrs: "2025-03-25",
						monys: 468.08
					},
					{
						sc_name: "官方严选商城",
						types: "租用中",
						title: "99新 iphone12 A14仿生芯片 超doasnfgoisdgba",
						taos: "521G 原色钛金属色 随租随还",
						times: "2025.03.02-2026.03.20",
						number: 1,
						onthtimes: 11,
						onethtime: 12,
						koukuanrs: "2025-03-25",
						monys: 468.08
					}
				]
			}
		},
		components: {
			navgiter
		},
		methods: {
			onxus() {
				uni.navigateTo({
					url: "/pages/mys/buyout/buyout"
				})
			},
			onmaiduans() {
				uni.navigateTo({
					url: "/pages/mys/renew/renew"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		font-size: 3vw;
	}

	.content {
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: auto;
	}

	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.zy_curd {
		width: 90%;
		height: 450rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.zy_curd_top {
		width: 90%;
		height: 80rpx;
		display: flex;
		border-bottom: 1px solid #EEEEEE;
	}

	.zy_curd_topleft {
		width: 50%;
		height: 100%;
		display: flex;
	}

	.zy_curd_topleft p {
		font-size: 30rpx;
		line-height: 80rpx;
	}

	.zy_curd_topleftimg {
		margin-top: 14rpx;
		width: 50rpx;
		height: 50rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;
	}

	.zy_curd_topright {
		width: 50%;
		height: 100%;
	}

	.zy_curd_topright p {
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: right;
		color: red;
	}

	.zy_curd_center {
		width: 90%;
		height: 200rpx;
		display: flex;
	}

	.zy_curd_centerleft {
		width: 35%;
		height: 100%;
	}

	.zy_curd_centerright {
		width: 65%;
		height: 100%;
	}

	.zy_curd_centerright p {
		line-height: 40rpx;
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 45rpx;
		font-size: 2.5vw;
	}

	.zy_curd_centertwo {
		width: 90%;
		height: 80rpx;
		display: flex;
	}

	.zy_curd_centertwo_left {
		width: 50%;
		height: 100%;
		display: flex;
	}

	.zy_curd_centertwo_left p {
		font-size: 25rpx;
		line-height: 80rpx;
		color: #7B7F7F;
	}

	.zy_curd_centertwo_right {
		width: 50%;
		height: 100%;
	}

	.zy_curd_centertwo_right p {
		font-size: 25rpx;
		color: #7B7F7F;
		line-height: 80rpx;
		text-align: right;
	}

	.zy_curd_btm {
		width: 90%;
		flex: 1;
		display: flex;
	}

	.zy_curd_btmleft {
		width: 40%;
		height: 100%;
	}

	.zy_curd_btmleft p {
		font-size: 30rpx;
		line-height: 100rpx;
	}

	.zy_curd_btmleft p span {
		font-size: 40rpx;
	}

	.zy_curd_btmright {
		width: 60%;
		height: 100%;
		display: flex;
	}
</style>